<template>
	<div class="S_Performance">
		<div class="one_part">
			<!-- <nav-li></nav-li> -->
			<nav>
				<ul class="nav" id="nav">
					<router-link id="weekli" tag="li" :to="{path:'/S_Performance-week',query:{empNo:personalId}}">周</router-link>
					<router-link id="yearli" tag="li" :to="{path:'/S_Performance-year',query:{empNo:personalId}}">年</router-link>
					<router-link class="cur" tag="li" :to="{path:'/S_Performance-team',query:{empNo:personalId}}" id="teamLi">团队</router-link>
				</ul>
			</nav>
			<ul class="ranking">
				<li class="mid">
					<span class="team_level">
						{{teamData.level || '未知'}}
						<router-link tag='i' class="ion ion-help-circled" to="/getTeamLevel"></router-link>
					</span>
					<big>{{teamData.rank || 0}}</big>
					<p>安全领队榜排名</p>
				</li>
			</ul>
			<router-link tag="span" class="rank_btn" :to="{path:'/getTeamRangkingList',query:{empNo:personalId}}">
				<i class="ion ion-arrow-graph-up-right"></i>
				<p>排行榜</p>
			</router-link>
		</div>
		<div class="plrEmpty remark_table">
			<router-link tag='i' class="ion ion-help-circled" to="/getTeamLevelExplain"></router-link>
			<table class="table text_center bg_white">
				<thead>
					<tr>
						<th>榜样得分</th>
						<th>团队得分</th>
						<th>任务得分</th>
						<th>您的总分</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td v-for="score of remark">{{score}}</td>
						<!-- <td>45</td>
						<td>0</td> -->
						<!-- <td class="fc_green"><b>45</b></td> -->
					</tr>
				</tbody>
			</table>
		</div>
		<!-- <p class="remark" v-if="remarkinfomsg">{{remarkinfomsg}}</p> -->

		<scatter :remarkinfo = "remarkinfomsg"></scatter>
		<div class="items">
			<p class="items_tit">您团队下列成员运作有困难，需要帮助：</p>
			<ul>
				<li @click="goStatusDetail(status)" v-for="(status,index) of statusData" class="has_right_attach" :class="{has_right_arrow:status.isHasArrow}">
					<i class="icon_dot dot_orange" :class="[status.class]"></i>
					<span>{{status.name}}</span>
					<span class="attach" :class="{fc_red:status.isHasHelp}">{{status.statusNum}}</span>
				</li>
			</ul>
		</div>
		<nav class="scatter_nav borderTop">
			<ul>
				<li @click="navTab(li,index)" :class="{cur:li.isCur}" v-for="(li,index) of underLingNav">{{li.name}}</li>
			</ul>
		</nav>
		<div class="team_con" v-show="isDirectShow">
			<h3 >直接汇报的下属指标完成情况</h3>
			<div ref="teamGoal" style="width:100%;height:28.2rem"></div>
		</div>
		<div class="team_con" v-show="isAllShow">
			<h3 >所有下属的指标完成情况</h3>
			<div ref="teamAllGoal" style="width:100%;height:28.2rem"></div>
		</div>
		<div class="mb10">
			<h3 class="plrEmpty ft15 line_height200">{{barType}}</h3>
			<ul class="items">
				<li class="has_right_attach" v-for="list of barDatailList"><span>{{list.empName}}</span><span class="attach">{{list.complate}} / {{list.allTimes}}</span></li>
			</ul>
		</div>
</div>
</template>
<script type="text/javascript">
	import s_performanceStyle from '../../assets/css/s_performance.scss'
	// import NavLi from './nav'
	import Scatter from './scatter'

	import NavLiShow from '../../assets/js/performace/navPermission'
	import echarts from 'echarts'
	import echartsOptions from '../../assets/js/performace/echartOption'
	// import teamInterfaceUrl from '../../assets/js/performace/url'
	import getInterface from '../../assets/js/insterface'

	export default{
		mixins:[NavLiShow,echartsOptions],
		components:{Scatter},
		data(){
			return{
				'underLingNav':[
					{
						name:'直系下属',
						isCur:true
					},
					{
						name:'所有下属',
						isCur:false
					}

				],
				'isDirectShow':true,
				'isAllShow':false,
				'personalId':'',
				'remark':[],
				'remarkinfomsg':[],
				'statusData':[
					{
						'class':'dot_red',
						'isHasArrow':false,
						'isHasHelp':false,
						'name':'严重违规',
						'status':'20',
						'statusNum':''
					},
					{
						'class':'dot_orange',
						'isHasArrow':false,
						'isHasHelp':false,
						'name':'较严重违规',
						'status':'15',
						'statusNum':''
					},
					{
						'class':'dot_yellow',
						'isHasArrow':false,
						'isHasHelp':false,
						'name':'一般违规',
						'status':'5',
						'statusNum':''
					},
					{
						'class':'dot_lighterYellow',
						'isHasArrow':false,
						'isHasHelp':false,
						'name':'轻微违规',
						'status':'3',
						'statusNum':''
					},
					{
						'class':'dot_red2',
						'isHasArrow':false,
						'isHasHelp':false,
						'name':'违停或任务未完成',
						'status':'1',
						'statusNum':''
					}
				],
				'teamData':'',
				'personalCount':'',
				'barDatailList':[],
				'barType':'',
				'currentChart':{
					'ref':'teamGoal',
					'url':'getTeamGoalChartUrl',
					'detailUrl':'getTaskByEmpNoAndTaskUrl'
				}
			}
		},
		mounted(){
			document.title="安全绩效";
			this.$el.parentElement.parentNode.style.background = '#fafafa';
      		this.personalId = this.$route.query.empNo;
			this.getTeamData();
			this.getAnalyseChart();
			// document.getElementsByTagName('meta')['viewport'].setAttribute('content','initial-scale=1, maximum-scale=4, user-scalable=yes, width=device-width');
		},
		// destroyed(){
		// 	document.getElementsByTagName('meta')['viewport'].setAttribute('content','initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width');
		// },
		methods:{
			navTab(li,index){
				for(let i=0;i<this.underLingNav.length;i++){
					this.underLingNav[i].isCur = false;
				}
				li.isCur = true;
				let vue = this;
				switch(index){
					case 0:
						this.isDirectShow = true;
						this.isAllShow = false;
						this.currentChart = {
							'ref':'teamGoal',
							'url':'getTeamGoalChartUrl',
							'detailUrl':'getTaskByEmpNoAndTaskUrl'
						}
						break;
					case 1:
						this.isDirectShow = false;
						this.isAllShow = true;
						this.currentChart = {
							'ref':'teamAllGoal',
							'url':'getTeamAllChartUrl',
							'detailUrl':'getTaskByEmpNoAndTaskAll'
						}
						break;
				}
				this.barType = '';
				this.barDatailList = [];
				this.getAnalyseChart();
			},
			getTeamData(){
				let teamUrl=getInterface.getTeamUrl + this.$route.query.empNo;
				this.$http.get(teamUrl,{emulateJSON: true})
				.then((response) => {
					// console.log(response);
					if(response){
						this.teamData = response.data;
						for(let value of this.statusData){

						}
						this.statusData[0].statusNum = response.data.status2;
						this.statusData[1].statusNum = response.data.status3;
						this.statusData[2].statusNum = response.data.status4;
						this.statusData[3].statusNum = response.data.status5;
						this.statusData[4].statusNum = response.data.status6;
						for(let value of this.statusData){
							if(value.statusNum>0){
								value.isHasArrow = true;
								value.isHasHelp = true;
							}else{
								value.isHasArrow = false;
								value.isHasHelp = false;
							}
						};
						// let remark0 = "0,45,0,45";
						// this.remark = remark0.split(',');
						this.remark = response.data.remark.split(',');
						// console.log(this.remarkinfomsg);

					}
				})
			},
			getAnalyseChart(){
				console.log(this.currentChart.ref)
				//if(this.$refs[this.currentChart.ref] == 'teamGoal'){
				//	this.$refs.teamAllGoal.innerHTML = ''
				//}else{
				//	this.$refs.teamGoal.innerHTML = ''
				//}
				let teamGoalChart = echarts.init(this.$refs[this.currentChart.ref]);
				let teamGoalChartUrl = getInterface[this.currentChart.url] + this.$route.query.empNo;
				this.$http.get(teamGoalChartUrl,{emulateJSON:true})
				.then((response) => {
					console.log(response);
					let vue = this;
					if(response){
						this.teamGoalOption.legend.data = response.data[0].name;
						this.teamGoalOption.xAxis.data = response.data[0].type;

						let dataLen = response.data[0].data.length;
						for(let i=0; i< dataLen; i++){
							this.teamGoalOption.series[i].data = response.data[0].data[i];
							this.teamGoalOption.series[i].name = response.data[0].name[i];
						}

						teamGoalChart.setOption(this.teamGoalOption);
						this.$refs[this.currentChart.ref].style.width = '100%'
						teamGoalChart.resize()

						teamGoalChart.on("click",function(params){
							let taskId = response.data[0].ids[params.dataIndex];
							vue.getAnalyseChartDetail(taskId,params.name)
						})
					}
				})
			},
			goStatusDetail(status){
				if(status.statusNum>0){
					this.$router.push({path:'/getStatusDetail',query:{empNo:this.personalId,status:status.status}});
				}
			},
			getAnalyseChartDetail(taskId,typeName){
				const taskByEmpNoAndTaskUrl = getInterface[this.currentChart.detailUrl];
				let params={
						empNo:this.$route.query.empNo,
						taskId:taskId
					}
				if(this.currentChart.detailUrl == 'getTaskByEmpNoAndTaskUrl'){
					this.$http.post(taskByEmpNoAndTaskUrl,params,{emulateJSON:true})
					.then((response)=>{
						console.log(response);
						if(response.data.length>0){
							this.barDatailList = response.data;
							this.barType = typeName;
						}
					})
				}else{
					this.$http.get(taskByEmpNoAndTaskUrl +'/'+ params.empNo +'/'+params.taskId,{emulateJSON:true})
					.then((response)=>{
						console.log(response);
						if(response.data.length>0){
							this.barDatailList = response.data;
							this.barType = typeName;
						}
					})
				}
				
			}
		}
	}
</script>
<style style="scss">
	.borderTop{
		margin-top:1rem;
	}
</style>